<template>
    <div>
        <pt-table :data="tableRules" url="ads" ref="tableRef"></pt-table>
        <pt-form type="dialog" url="ads" :rules="formRules" ref="formRef"></pt-form>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { ITable } from '@pangtou/table'
import type { IFormConfig } from '@pangtou/form'

const tableRef = ref()
const formRef = ref()

onMounted(() => {
    tableRef.value.action.setFormRef(formRef)
})

const options = [
    { label: '首页-Banner图', value: 1, text: '首页-Banner图' },
    { label: '首页-轮播图', value: 2, text: '首页-轮播图', type: 'warning' },
    { label: '首页-中图', value: 3, text: '首页-中图', type: 'danger' },
]

const tableRules: ITable = {
    header: { buttons: ['add', 'del', 'refresh', 'extend'] },
    column: [
        { type: 'index' },
        { label: '广告位置', prop: 'ad_position_id', render: 'tag', renderExtend: options },
        { label: '广告标题', prop: 'title' },
        { label: '描述', prop: 'intro' },
        { label: '图片', prop: 'photo', render: 'image' },
        {
            prop: 'operate',
            label: '操作',
            width: '150',
            fixed: 'right',
            buttons: ['edit', 'del'],
        },
    ],
}
const formRules: IFormConfig = {
    rules: [
        { label: '广告标题', field: 'title' },
        {
            label: '广告位置',
            field: 'ad_position_id',
            type: 'select',
            options: options,
        },
        { label: '广告图片', field: 'photo', type: 'image' },
        { label: '跳转地址', field: 'links' },
        { label: '描述信息', field: 'intro', type: 'textarea' },
    ],
}
</script>

<style scoped lang="scss"></style>
